<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Hit Number</title>
	<style type="text/css">
		body {
			margin: 0;
			padding: 0;
			background:#E0E0E0;
		}

		button {
			background:#2980b9;
			border:none;
			padding: 10px 20px;
			border-radius: 3px;
		}

		.btn-panel {
			text-align: center;
			margin: 10px auto;
			width: 800px;
		}

		#wrapper {
			width: 800px;
			margin: 0 auto;
			border: 1px solid #ccc;
			border-sizing: border-box;
		}

		#game-container {
			height: 500px;
		}

		#top-view {
			height: 50px;
			border-bottom: 1px solid #ccc;
		}

		#main-view {
			height: 400px;
		}

		#foot-view {
			height: 50px;
			background: #ccc;
		}

		.top-line {
			width: 10%;
			height: 100%;
			float: left;
			height: 50px;
			line-height: 50px;
			text-align: center;
			font-size: 30px;
			font-weight: bold;
			font-family: 'microsoft yahei'
		}

		.line {
			width: 10%;
			border-right: 1px solid #ccc;
			height: 100%;
			float: left;
			position: relative;
			box-sizing:border-box;
			-moz-box-sizing:border-box; /* Firefox */
			-webkit-box-sizing:border-box; /* Safari */
		}

		.line:last-child{
			border:none;
		}

		.block {
			height: 20px;
			background: #03A9F4;
			/*border:1px solid blue;*/
			box-sizing:border-box;
			transition:all .6s;
			position: absolute;
			width: 100%;
			left: 0;
			top: 0;
		}

		.hide {
			display: none;
		}

		.show {
			display: ;
		}
	</style>

	<script>

		function init_main_view() {
			var main_view = document.querySelector("#main-view");
			var fs = [];
			for (var i = 1; i <= 10; i++) {
				var line = document.createElement("div")
				line.className = "line";
				line.id = "line-" + (i-1);
				fs.push(line);
				main_view.appendChild(line);
			}

		}

		function init_top_view() {
			var top_view = document.querySelector("#top-view");
			var fs = [];
			for (var i = 1; i <= 10; i++) {
				var line = document.createElement("div")
				line.className = "top-line";
				line.innerHTML = i < 10 ? i : "0"
				fs.push(line);
				top_view.appendChild(line);
			}
		}

		var game_status = {
			start: false, 
			block_history: [],
			render_handler: null, 
			game_speed: 1000,
			status: "",
			times: 0,
			enable_log: true,
			miss: 0,
			hit: 0,
			keys: [49,50,51,52,53,54,55,56,57,48],
			status_listener_handler: null
		}

		function init_block_history() {
			for(var i = 0; i < 10; i++) {
				game_status.block_history.push([]);
			}
		}

		function reset_block_history() {
			game_status.block_history = [];
			init_block_history();
		}

		function BlockItem(dom, ownline, index) {
			this.dom = dom;
			this.handler = null;
			this.index = index;
			this.ownline = ownline;
			// this.dom.innerHTML = index;
			this.top = 0;
			this.max_top = 420;
		}

		BlockItem.prototype.remove = function() {
			if(this.dom){
				log("删除，关闭动画....", this.dom.id);
				this.stop_animate();
				this.dom.remove();
				
			}
		}

		BlockItem.prototype.stop_animate = function() {
			if(this.handler){
				window.clearInterval(this.handler);
			}
		}

		BlockItem.prototype.check_miss = function() {
			var top = parseInt(this.dom.style.top.replace("px",""),10);
			// log("top",top);
			if(this.top > this.max_top) {
				// window.clearInterval(this.handler)
				game_status.miss++;
				this.remove();
				on_miss_callback();
			}
		}

		BlockItem.prototype.animate = function() {
			log("开始动画....",this.dom.id);
			this.handler = setInterval(function() {
				this.dom.style.top = this.top + "px";
				this.top += 3;
				this.check_miss();
				// var top = parseInt(this.dom.style.top.replace("px",""),10);
				
			}.bind(this), 60);
		}

		function add_block(num){
			
			var index = num - 1;
			// log("add block index", index);
			if(index < 0) index = 0;
			if(index > 9) index = 9;
			var block_dom = document.createElement("div");
			block_dom.className = "block";
			block_dom.id = "dom-" + game_status.times;
			var line_dom = document.querySelector("#line-" + index);
			line_dom.appendChild(block_dom);

			var block_item = new BlockItem(block_dom,line_dom, game_status.times);
			game_status.block_history[index].push(block_item);
			// console.log(game_status.block_history);
			block_item.animate();
		}

		function start_bgm() {
			log("start_bgm");
			document.querySelector("#bgm").play();
		}

		// function stop_bgm() {
		// 	log("stop_bgm");
		// 	document.querySelector("#bgm").stop();
		// }

		function pause_bgm() {
			log("stop_bgm");
			document.querySelector("#bgm").pause();
		}

		function render_block() {
			
			function render() {
				// if(game_status.times > 0)
				// 	return;
				var rnd = Math.ceil(Math.random(1) * 11);
				
				log("rnd", rnd);
				add_block(rnd);

				// log("render ...." + game_status.times)
			}

			game_status.render_handler = window.setInterval(function(){
				render();
				game_status.times++;
			}, game_status.game_speed);
		}

		function pause_game() {
			log("stop game")
			if (game_status.render_handler) 
				window.clearInterval(game_status.render_handler);

			for(var i = 0; i < game_status.block_history.length; i++) {
				var line_history = game_status.block_history[i];
				for(var j = 0; j < line_history.length; j++){
					line_history[j].stop_animate();
				}
			}
		}

		function restart_game() {
			log("restart game");

			for(var i = 0; i < game_status.block_history.length; i++) {
				var line_history = game_status.block_history[i];
				for(var j = 0; j < line_history.length; j++){
					line_history[j].animate();
				}
			}

			render_block();
		}

		function stop_game() {
			log("stop game");
			if(game_status.start) {
				game_status.start = false;
				game_status.status = "";
				game_status.times = 0;
				if (game_status.render_handler) {
					window.clearInterval(game_status.render_handler);
					game_status.render_handler = null;
				}

				var audio = document.querySelector("#bgm");
				audio.pause();
				audio.currentTime = 0;

				clear_block();

				document.querySelector("#foot-view").innerHTML = "";
			}
		}

		function clear_block() {
			log("clear block");

			for(var i = 0; i < game_status.block_history.length; i++) {
				var line_history = game_status.block_history[i];
				for(var j = 0; j < line_history.length; j++){
					line_history[j].remove();
				}
			}
		}



		function hit_block(keyCode) {
			if(game_status.start && game_status.status === "") {
				var keyIndex = find_index(game_status.keys, keyCode);
				if(keyIndex === -1)
					return;
				
				// log("history index", keyIndex);
				var line_history = game_status.block_history[keyIndex];
				var block_item = line_history.shift();
				
				block_item.remove();
				game_status.hit++;

				on_hit_callback();
			}
		}

		function render_game_status() {
			var html = [];
			html.push("Miss:" + game_status.miss + ", Hit:" + game_status.hit);
			document.querySelector("#foot-view").innerHTML = html.join("");
		}

		function on_miss_callback() {
			render_game_status();
		}

		function on_hit_callback() {
			render_game_status();
		}

		function log() {
			if(window.console && game_status.enable_log) {
				window.console.log(arguments)
			}
		}

		window.onload = function() {
			init_block_history();
			init_top_view();
			init_main_view();

			document.querySelector("#btn-startgame").onclick = function(){
				if(!game_status.start) {
					game_status.start = true;
					render_block();
					start_bgm();
					this.className = "hide";
					document.querySelector("#btn-pausegame").className = "show";
				}
			}

			document.querySelector("#btn-pausegame").onclick = function() {
				if(game_status.start) {
					if(game_status.status == "") {
						game_status.status = "pause";
						pause_bgm();
						pause_game();
						this.innerHTML = "开始";
					} else {
						game_status.status = "";
						start_bgm();
						restart_game();
						this.innerHTML = "暂停";
					}
				}
			}

			document.querySelector("#btn-stopgame").onclick = function() {
				if(game_status.start) {
					document.querySelector("#btn-pausegame").className = "hide";
					document.querySelector("#btn-startgame").className = "";
					stop_game();
				}
			}

			
			document.onkeydown = function(e) {
				var key = e.keyCode;
				hit_block(key)
			}

			
		}

		function find_index(arr, item) {
			for(var i = 0; i < arr.length; i++) {
				if(arr[i] === item) {
					return i;
				}
			}

			return -1;
		}

		function remove_item(arr, item) {
			var i = find_index(arr, item);
			if(i == -1)
				return;
			arr.splice(i,1);
		}
	</script>
</head>
<body>
	<div class="btn-panel">
		<button id="btn-startgame">开始</button>
		<button id="btn-pausegame" class="hide">暂停</button>
		<button id="btn-stopgame">结束</button>
	</div>
	
	<div id="wrapper">
		<div id="game-container">
			<div id="top-view"></div>
			<div id="main-view"></div>
			<div id="foot-view"></div>
		</div>
	</div>
	<div>
		<audio src="sakula.mp3" id="bgm">
			您的浏览器不支持 audio 标签。
		</audio>
	</div>
</body>
</html>